<template>
  <view class="load-more-container">
    <view class="main" v-if="list.length">
      <slot :list="list"></slot>
    </view>
    <template v-if="!loading">
      <view
        class="patten-click text bottom-row"
        v-if="pattern === 'click' && !loaded && total !== 0"
        @click="handleLoadMore"
      >
        我需要了解更多数据
        <uni-icons class="unfold" type="unfold"></uni-icons>
      </view>
      <view class="text" v-if="loaded && total !== 0">我也是有底线的～</view>
      <view class="text" v-if="total === 0">
        数据为空
      </view>
    </template>
    <view class="text" v-if="loading">
      正在加载中...
    </view>
  </view>
</template>

<script>
import UniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
  props: {
    pattern: {
      type: String, // 'click' | 'scroll' 加载更多的方式 点击或者滚动暂时先支持点击方式
      default: 'click',
    },
    getList: {
      type: Function,
      default: null,
    },
    query: {
      type: Object, // 请求传参
      default: () => {
        return {}
      },
    },
    trigger: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    trigger: {
      handler: function (val, oldVal) {
        if (val !== oldVal) {
          console.log(`- should refresh`)
          this.refresh()
        }
      },
    },
  },
  data() {
    return {
      page: 1,
      loaded: false, // 是否已经加载完全部
      loading: false, // 是否正在加载
      list: [],
      total: 0,
    }
  },
  created() {
    this.requestData()
  },
  methods: {
    refresh() {
      this.page = 1
      this.list = []
      this.loading = true
      this.loaded = false
      this.total = 0
      this.requestData()
    },
    handleLoadMore() {
      this.page++
      this.requestData()
    },
    requestData() {
      // if (this.loaded || this.loading) {
      //   return
      // }

      this.loading = true

      this.getList({ ...this.query, page: this.page })
        .then(res => {
          this.loading = false
          if (res.code === 1 && Array.isArray(res.data)) {
            const total = res.data.length
            const data = res.data
            const list = [...this.list, ...data]
            this.list = list
            // 如果总数为0, 或list已经加载到总数了则已经加载完成
            this.total = total
            this.loaded = total === 0 || list.length >= total
          } else if (res.code === 1 && res.data.list) {
            const { total, data } = res.data.list
            const list = [...this.list, ...data]
            this.list = list
            // 如果总数为0, 或list已经加载到总数了则已经加载完成
            this.total = total
            this.loaded = total === 0 || list.length >= total
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
          }
        })
        .catch(e => {
          console.log(e)
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.load-more-container {
  position: relative;
  width: 100%;
  height: 100%;
  .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20upx 0;
    min-height: 100%;
  }
  .bottom-row {
      width: 100%;
  }
  .text {
    font-size: 24upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    justify-content: center;
    color: rgba(113, 128, 138, 1);
    text-align: center;
  }
  .patten-click {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    .unfold {
      font-size: 20upx;
      margin-left: 10upx;
    }
  }
}
</style>
